<script setup lang="ts">
import { userInfoStore } from "store/userInfo";
import {User,Message} from "@element-plus/icons-vue";
import { computed,ref } from "vue";
const user = userInfoStore().userInfo.LoginUser
const size = ref('')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
</script>

<template>
<div class="box-info">
  <el-descriptions
    class="margin-top"
    :column="3"
    size="large"
    direction="vertical"
    border
  >
    <template #extra>
<!--      <el-button type="primary">Operation</el-button>-->
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <User />
          </el-icon>
          Username
        </div>
      </template>
      {{user.name}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Message />
          </el-icon>
          Email
        </div>
      </template>
      {{user.email}}
    </el-descriptions-item>
    </el-descriptions>
</div>
</template>

<style scoped>
.box-info{
  width: 100%;
  height: 100%;
}
</style>